<template>
  <el-dialog v-model="state.visible" title="修改订单状态" width="800">
    <el-form
      ref="formRef"
      v-loading="loading"
      :model="data"
      label-width="100px"
    >
      <el-form-item label="订单编号">
        {{ data?.orderId }}
      </el-form-item>
      <el-form-item label="下单时间">
        {{ data?.createTime }}
      </el-form-item>
      <el-form-item label="活动名称">
        {{ data?.activityName }}
      </el-form-item>
      <el-form-item label="活动封面">
        <el-image :src="data?.activityCover" />
      </el-form-item>
      <el-form-item label="出行时间">
        {{ data?.beginTime }} 至 {{ data?.endTime }}
      </el-form-item>
      <el-form-item label="购买单价">
        {{ toPrice(data?.activityPrice) }}
      </el-form-item>
      <el-form-item label="购买份数" prop="status">
        {{ data?.buySize }}份
      </el-form-item>
      <el-form-item label="购买总价" prop="status">
        {{ toPrice(data?.payAmount) }}
      </el-form-item>
      <el-form-item label="购买人信息" prop="status">
        {{ data?.usernameStr }}
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <Select v-model="formData.status" constKey="orderType1"></Select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          type="primary"
          @click="onSubmit"
          :loading="commitReq.loading.value"
        >
          确认
        </el-button>
        <el-button @click="state.visible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import API from '@/api/api';
import { useMessage } from '@/hooks/useMessage';
import { toPrice } from '@/utils/index';
import { createRequireRole } from '@/utils/rules';
import { useRequest } from 'vue-hooks-plus';
const emit = defineEmits(['success']);

defineExpose({ open }); // 提供 open 方法，用于打开弹窗

const route = useRoute();
const state = reactive({
  visible: false,
  id: '',
});
const formData = reactive({
  status: '',
});
const message = useMessage(); // 消息弹窗

const { data, loading, refresh } = useRequest(
  async () => {
    return API.orderController.info({
      id: state.id,
    });
  },
  {
    manual: true,
    onSuccess(res) {
      formData.status = res.status;
    },
  }
);
function open(id: string) {
  state.visible = true;
  state.id = id;
  refresh();
}
const commitReq = useRequest(
  () => {
    return API.orderController.update({
      id: state.id,
      status: formData.status,
    });
  },
  {
    manual: true,
  }
);
async function onSubmit() {
  await commitReq.refreshAsync();
  message.success('修改成功');
  state.visible = false;
  emit('success');
}
</script>
